<template>
  <div
    v-loading="isFromLoaded.loaded"
    :element-loading-text="isFromLoaded.text"
  >
    <el-form v-if="draftConfig && draftConfig.isDraft">
      <el-form-item label="自动保存草稿" style="margin-bottom: 0px">
        <el-switch v-model="draftConfig.auto_save"></el-switch>
      </el-form-item>
    </el-form>
    <template>
      <el-alert v-if="pagePrompt" :closable="false" :type="pagePrompt.type">
        <slot>
          <div v-html="recoverFileAddress4richText(pagePrompt.description)"></div>
        </slot>
      </el-alert>
    </template>
    <el-row class="form-view-wrapper">
      <slot name="field-form-prepend"></slot>
      <el-form
        :model="formModel"
        ref="elform"
        :inline="false"
        label-position="right"
        label-width="10rem"
        v-if="formLoaded"
      >
        <el-row v-for="(formItems, section) in sections" :key="section">
          <div class="el-col el-col-24 el-col-xl-24">
            <div
              class="el-form-item"
              v-if="!!section && formatSection(section)"
              style="margin-bottom: 0"
            >
              <span
                class="section-title"
                :class="{ 'is-collapse': sectionsCollapse[section] }"
                @click.stop="onSectionsCollapseChange(section)"
              >
                <span>
                  {{ formatSection(section) }}
                </span>

                <collapse-arrow
                  v-if="
                    section !== '$' &&
                    (cfgJsonOptionsType.includes('分组默认折叠') ||
                      section.includes(':折叠'))
                  "
                  :collapse="sectionsCollapse[section]"
                />
              </span>
            </div>
          </div>
          <slot :name="section + '-begin'"></slot>

          <span
            v-for="(formItem, fIndex) in formItems"
            :key="fIndex"
            v-show="!getSectionShow(section)"
            style="display: black"
            :for="formItem.field.info.name"
          >
            <field-editor
              :field="formItem.field"
              :content-fields="formItem.contentFields"
              :key="formItem.field.info.name"
              :form-model="formModel"
              :defaultCondition="defaultCondition"
              :childForeignkey="childForeignkey"
              :mainformDatas="mainformDatas"
              :parentAddMainFormDatas="parentAddMainFormDatas"
              :form-has-invalid-error="hasInvalidField()"
              @field-value-changed="onFieldValueChanged($event)"
              @child-form-loaded="onChildFormLoaded"
              :defaultValues="defaultValues"
              v-if="formItem.field.info.exist"
              v-show="
                formItem.field.info.visible &&
                formItem.field.info.name != referenced_column_name
              "
            >
              <!-- <field-editor :field="formItem.field" :content-fields="formItem.contentFields" :key="formItem.field.info.name" :defaultCondition='defaultCondition' :childForeignkey="childForeignkey" :mainformDatas='mainformDatas||parentAddMainFormDatas' :form-has-invalid-error="hasInvalidField()" @field-value-changed="onFieldValueChanged($event)" :defaultValues='defaultValues||srvValFormModel()' v-show="formItem.field.info.visible && formItem.field.info.visible &&formItem.field.info.name!=referenced_column_name"> -->

              <template #field-child-prepend>
                <slot
                  :name="formItem.field.info.name + '-child-prepend'"
                  class="padding-bottom"
                ></slot>
              </template>
              <template #field-child-append>
                <slot
                  :name="formItem.field.info.name + '-child-append'"
                  class="padding-bottom"
                ></slot>
              </template>
            </field-editor>
            <!-- <slot :name="formItem.field.info.name + '-append'"></slot> -->
          </span>
        </el-row>
      </el-form>
      <slot name="field-form-append"></slot>
    </el-row>
    <loader
      ref="loader"
      :service="loaderService"
      :pageIsDraft="pageIsDraft"
      @loader-complete="onLoaderComplete($event)"
    >
    </loader>
    <!-- <slot name="child"></slot> -->
    <!-- <slot name="child"></slot> -->
    <el-row
      v-if="
        cfgJson && cfgJson.agreement_json && cfgJson.agreement_json.agreement_no
      "
    >
      <el-col :span="24" style="text-align: center; padding: 20px">
        <agreement-box
          :agreementJson="cfgJson.agreement_json"
          :agreementChecked.sync="agreementChecked"
        ></agreement-box>
      </el-col>
    </el-row>
    <el-row
      v-if="!isPlatChildForm"
      :class="{
        disabled:
          cfgJson &&
          cfgJson.agreement_json &&
          cfgJson.agreement_json.agreement_no &&
          !agreementChecked,
      }"
    >
      <el-col :span="24" style="text-align: center; padding: 20px">
        <template v-for="item in actions">
          <template v-if="Array.isArray(item)">
            <action
              :duplicateType="duplicateType"
              :duplicateData="duplicateData"
              v-for="(item1, sIndex) in item"
              :info="item1"
              :key="item1 + sIndex"
              :ref="item1.name + sIndex"
              :isDraft="pageIsDraft"
              v-show="item1.visibleFunc()"
              :draftDataKey="draftDataKey"
              @is-data-key="resDataKey($event)"
              @form-is-loaded="onIsLoaded($event)"
              @action-complete="$emit('action-complete', $event)"
              @executor-complete="$emit('executor-complete', $event)"
            >
            </action>
          </template>
          <action
            :duplicateType="duplicateType"
            :duplicateData="duplicateData"
            v-else
            :info="item"
            :key="item.name"
            :ref="item.name"
            :isDraft="pageIsDraft"
            v-show="item.visibleFunc()"
            :draftDataKey="draftDataKey"
            @is-data-key="resDataKey($event)"
            @form-is-loaded="onIsLoaded($event)"
            @action-complete="$emit('action-complete', $event)"
            @executor-complete="$emit('executor-complete', $event)"
          >
          </action>
        </template>
        <!-- <action v-for="item in actions" :info="item" :key="item.name" :ref="item.name" :isDraft="pageIsDraft" v-show="(item.visibleFunc)()" :draftDataKey="draftDataKey" @is-data-key="resDataKey($event)" @form-is-loaded="onIsLoaded($event)" @action-complete="$emit('action-complete', $event);" @executor-complete="$emit('executor-complete', $event)">
        </action> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FieldEditor from "./field-editor.vue";
import FormMixin from "../mixin/form-mixin";
import FieldRedundantMixin from "../mixin/field-redundant-mixin";
import FormValidateMixin from "../mixin/form-validate-mixin";
import Action from "./action.vue";
import { ActionInfo } from "../model/ActionInfo";
import { ExecutorInfo } from "../model/ExecutorInfo";
import Vue from "vue";
import Loader from "./loader.vue";
import CustButtonMinx from "../mixin/cust-button-minx";
import agreementBox from "./agreement-box.vue";
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "simple-add",
  components: {
    Loader,
    "field-editor": FieldEditor,
    Action,
    agreementBox,
  },
  mixins: [FormMixin, CustButtonMinx, FieldRedundantMixin, FormValidateMixin],
  props: {
    defaultCondition: {
      type: Array,
    },
    formType: {
      type: String,
      default: "add",
    },
    parentPageType: {
      type: String,
      default: "",
    },
    haveDraft: {
      type: Boolean,
      default: false,
    },
    childForeignkey: {
      type: Object,
    },
    mainformDatas: {
      type: Object,
    },
    defaultValues: {
      type: Object,
    },
    childrenLists: {
      type: Array,
    },
    parentAddMainFormDatas: {
      type: Object,
    },
    duplicateType: String,
    duplicateData: Object,
    lastStep: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      service_name: this.service || this.$route.params.service_name,
      referenced_column_name: null,
      agreementChecked: false,
    };
  },
  watch: {
    childForeignkey: {
      default: true,
      immediate: true,
      handler: function (val, olval) {
        if (val) {
          for (const key in val) {
            if (key == "referenced_column_name") {
              this.referenced_column_name = val[key];
            }
          }
        }
      },
    },
  },

  methods: {
    buildRunQuries() {
      let formModel = cloneDeep(this.srvValFormModel());
      delete formModel._children;

      let query = {
        serviceName: this.service_name,
        data: [formModel],
      };

      return [query];
    },
    addSubmitAction: function (e) {
      let submitAction = new ActionInfo(e, "form");
      if (this.actions["submit"]) {
        let submitActions = [];
        if (Array.isArray(this.actions["submit"])) {
          submitActions = [...this.actions["submit"]];
        } else {
          submitActions.push(this.actions["submit"]);
        }
        submitActions.push(submitAction);
        Vue.set(this.actions, "submit", submitActions);
      } else {
        Vue.set(this.actions, "submit", submitAction);
      }
      submitAction.name = "submit";
      submitAction.label = "提交";
      submitAction.confirm = "是否确认提交?";
      if (this.formV2 && "tbl_options" in this.formV2) {
        if (!this.formV2.tbl_options?.includes("增加确认提示")) {
          // 增加默认不需要提示
          submitAction.confirm = null;
        }
      }
      submitAction.precheckFunc = (_) => {
        return this.validateForm();
      };

      if (this.navAfterSubmit && this.parentPageType.indexOf("list") == -1) {
        submitAction.nav2Location = {
          name: "list",
          params: { service_name: this.loaderService },
        };
      }

      if (this.submit2Db) {
        let executor = new ExecutorInfo();
        submitAction.executor = executor;

        submitAction.draftConfig = this.draftConfig;
        executor.service = this.service_name;
        this.bindExecutorValues(executor);
      } else {
        submitAction.invokeFunc = (_) => {
          this.$emit("submitted2mem", this.srvValFormModel(), this.fields);
        };
      }

      return submitAction;
    },

    addResetAction: function (e) {
      let resetAction = new ActionInfo(e, "form");
      Vue.set(this.actions, "reset", resetAction);

      resetAction.name = "reset";
      resetAction.label = "重置";
      resetAction.invokeFunc = (_) => this.resetForm();

      return resetAction;
    },

    confLoader: function () {
      let loader = this.$refs.loader;
      loader.colNames = ["*"];
      loader.conditions = this.defaultConditions;
    },

    /**
     * 重置字段为初始值
     */
    resetForm: function () {
      for (let key in this.fields) {
        this.fields[key].reset2Init();
      }
      if (Array.isArray(this.childForm) && this.childForm.length) {
        this.childForm.forEach((item) => {
          item?.$refs?.basicForm?.resetForm();
        });
      }
    },
    /**
     * 保存草稿操作
     */
    saveDraft: function (e) {
      let submitAction = new ActionInfo(e, "form");
      Vue.set(this.actions, "save_draft", submitAction);

      submitAction.name = "save_draft"; // e.button_type
      submitAction.label = "保存草稿1";
      submitAction.confirm = "是否确认保存?";
      if (this.formV2 && "tbl_options" in this.formV2) {
        if (!this.formV2.tbl_options?.includes("增加确认提示")) {
          // 增加默认不需要提示
          submitAction.confirm = null;
        }
      }
      // submitAction.precheckFunc = _ => {
      //   return this.validateForm();
      // }
      submitAction.operate_type = "草稿";
      submitAction.visible = "true";
      if (this.navAfterSubmit) {
        submitAction.nav2Location = {
          name: "list",
          params: { service_name: this.loaderService },
        };
      }

      if (this.submit2Db) {
        let executor = new ExecutorInfo();
        submitAction.executor = executor;
        executor.service = this.service_name;
        submitAction.draftConfig = this.draftConfig;
        executor["draft"] = true;
        this.bindExecutorValues(executor);
        let formModelDatas = this.srvValFormModel();

        // submitAction.invokeFunc = _ => {
        //   this.$emit("submitted2mem", formModelDatas, this.fields);
        // }
        // submitAction.invokeFunc = _ => {
        //     this.customizeOperate(submitAction, [this.srvValFormModel()]);
        //   }
      } else {
        submitAction.invokeFunc = (_) => {
          this.$emit("submitted2mem", this.srvValFormModel(), this.fields);
        };
      }

      return submitAction;
    },
  },

  mounted: function () {
    let self = this;
    this.createFields((srvCol) => srvCol.in_add != 0)
      .then((response) => {
        // make all field editable
        for (let fieldName in this.fields) {
          let field = this.fields[fieldName];
          let infoObj = new Object();
          infoObj = field.info;
          field.info.exist = true;
          if (field.info.srvCol.in_add != 1) {
            field.info.visible = false;
            if (field.info.srvCol.in_add === 0) {
              field.info.exist = false;
            }
          } else {
            /**
             * 处理子表默认值 引用主表from
             */
            if (
              infoObj.hasOwnProperty("moreConfig") &&
              infoObj.editor === "DateRange" &&
              infoObj.moreConfig !== null &&
              infoObj.moreConfig.hasOwnProperty("DateRangeConfig")
            ) {
              field.info._DateMaxMin = this.getDateRangExpr(
                infoObj,
                this.parentAddMainFormDatas
              );
            }
          }
        }

        if (response && response.data && response.data.formButton) {
          let formButtons = response.data.formButton;
          /**
           * 根据配置是否创建草稿按钮
           */
          if (this.draftConfig !== null) {
            this.createActions(formButtons);
          } else {
            formButtons = formButtons.filter((item) => {
              if (item.hasOwnProperty("more_config")) {
                let btnCfg =
                  item.more_config && typeof item.more_config === "string"
                    ? JSON.parse(item.more_config)
                    : false;
                if (
                  btnCfg &&
                  btnCfg.hasOwnProperty("is_draft") &&
                  btnCfg.is_draft
                ) {
                } else {
                  return item;
                }
              } else {
                return item;
              }
            });
            this.createActions(formButtons);
          }
        }
      })
      .then((_) => {
        this.emitEvent("metadata-loaded", this);

        if (this.defaultConditions && this.defaultConditions.length > 0) {
          this.confLoader();
          return this.$refs.loader.run();
        } else {
          this.resetForm();
        }
      })
      .then(() => {
        this.watchFormModel();
        this.formLoaded = true;
      })
      .then(() => {
        this.setFieldsDefaultValue();
      })
      .then(() => {
        this.$emit("form-loaded", this);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-form-item__content {
  line-height: initial;
  line-height: unset;
}
.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.5;
}
.disabled .bx_action {
  pointer-events: none;
}
</style>
